<!DOCTYPE html>
<html>
<head>
    <title>立方体</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/three.min.js"></script>
</head>
<body onload="init()">
<canvas id="mainCanvas" style="width: 800px;height: 600px;"></canvas>
</body>
<script>
    /* 立方体 CubeGeometry
    * CubeGeometry(width,height,depth,widthSegments,heightSegments,depthSegments)
    * width:x方向长度
    * height:y方向长度
    * depth:z方向长度
    * widthSegments,heightSegments,depthSegments:分别是在三个方向上的分段数
    *
    * 平面 PlaneGeometry
    * PlaneGeometry(width,height,widthSegments,heightSegments)
    *
    * 球体 SphereGeometry
    * SphereGeometry(radius,segmentsWidth,segmentsHeight,phiStart,phiLength,thetaStart,thetaLength)
    * radius:半径
    * segmentsWidth:经度的切片数
     * segmentsHeight:纬度的切片数
     * phiStart:经度开始的弧度
     * phiLength:经度跨过的弧度
     * thetaStart:纬度开始的弧度
     * thetaLength:纬度跨过的弧度
    * */
    function init(){
        var scene = new THREE.Scene();

        var renderer = new THREE.WebGLRenderer({
            canvas:document.getElementById('mainCanvas')
        });
        renderer.setClearColor(0x000000);

        var camera = new THREE.PerspectiveCamera(60,800/600,1,10);
        camera.position.set(4,-3,5);
        camera.lookAt(new THREE.Vector3(0,0,0));
        scene.add(camera);
        //立方体
        /*var cube = new THREE.Mesh(new THREE.CubeGeometry(1,2,3,2,2,3),
                        new THREE.MeshBasicMaterial({
                            color:0xff0000,
                            wireframe:true
                    }));
        scene.add(cube);*/

        //平面
        /*var plane = new THREE.Mesh(new THREE.PlaneGeometry(2,4),
                        new THREE.MeshBasicMaterial({
                            color:0xff0000,
                            wireframe:true
                        }));
        scene.add(plane);*/

        //球体
        var sphere = new THREE.Mesh(new THREE.SphereGeometry(3,8,6,Math.PI/6,Math.PI/3),
                        new THREE.MeshBasicMaterial({
                            color:0xff0000,
                            wireframe:true
                        }));
        scene.add(sphere);

        renderer.render(scene,camera);
    }
</script>
</html>